@import "public";
@import "main";

.headD{height: 76px}
.head{position: fixed; z-index: 50; left: 0; top: 0; width: 100%; background: #fff; @include shadow(0 10px 24px rgba(112, 112, 112, .2)); font-size: 14px;
  .wal{height: 76px; position: relative}
  a.logo{display: block; width: 132px; height: 100%; background: url("../image/logo.png") center no-repeat; @include absolute($l:0, $t:0)}
  .name{@include absolute($l:145px, $t:0); line-height: 76px; color: #666}
  a.loginA{display: block; @include absolute($t:50%, $r:0); border: $red solid 1px; color: $red; @include radius(3px); width: 96px; height: 30px; line-height: 28px; text-align: center; margin-top: -15px;
    &:hover{background: $red; color: #fff}
  }
}
.nav{@include absolute($t:0, $r:140px);
  li{float: left; margin-left: 30px}
  a{display: block; height: 76px; line-height: 76px; position: relative; font-size: 18px;
    &:before{@include before(); left: 50%; margin-left: 0; bottom: 0; width: 0; height: 4px; @include radius(2px); background: $red}
    &:hover, &.on{color: $red;
      &:before{width: 34px; margin-left: -17px}
    }
  }
}

.foot{background: url("../image/foot.jpg") center no-repeat; color: #fff; font-size: 14px;
  .wal{height: 313px; position: relative}
  .tel{@include absolute($l:0, $t:40px);
    p{line-height: 45px; font-size: 14px; color: #c5c5c5;
      span{font-size: 18px}
    }
  }
  .container{width: 810px; padding-left: 385px;
    .name{font-size: 16px; padding-top: 40px; height: 83px; border-bottom: rgba(255, 255, 255, .28) solid 1px}
    .content{font-size: 18px; line-height: 30px; padding: 18px 0 22px 0}
    .more a{display: block; width: 123px; height: 38px; line-height: 36px; text-align: center; border: #fff solid 1px; @include radius(4px); font-size: 14px; color: #fff;
      &:hover{background: #fff; color: $red}
    }
  }
  .ewm{@include absolute($t:42px, $r:0); text-align: center;
    dd{width: 109px; float: left; margin-left: 67px}
    p{font-size: 16px; padding-top: 15px; margin-left: -10px; margin-right: -10px}
  }
  .link{color: #8c7b73; @include absolute($l:0, $b:50px); width: 100%;
    a{color: #8c7b73; padding-right: 14px;
      &:hover{color: #fff}
    }
  }
  .msg{color: #8c7b73; @include absolute($l:0, $b:20px)}
}

/*index*/
.indexFlash{width: 100%; overflow: hidden; position: relative;
  .swiper-slide a{display: block; height: 869px; background: center no-repeat}
  .dots{@include absolute($r:50px, $t:340px); width: 12px;
    span{display: block; height: 12px; margin-bottom: 12px; background: rgba(255, 255, 255, .2); @include radius(50%)}
    .swiper-pagination-bullet-active{background: #fff}
  }
}

.indexNotice{border-bottom: #eaeaea solid 1px; position: relative; z-index: 11;
  .wal{height: 44px; position: relative}
  .title{position: absolute; left: -54px; top: -15px; background: url("../image/img244.png") center no-repeat; width: 244px; height: 57px; color: #fff; font-size: 16px; line-height: 17px; padding: 10px 0 0 60px}
  a.more{display: block; font-size: 14px; color: #666; line-height: 44px; background: url("../image/img18.png") right center no-repeat; padding-right: 23px; @include absolute($t:0, $r:0);
    &:hover{color: $red; background-image: url("../image/img18on.png")}
  }
  .list{height: 44px; overflow: hidden; position: relative;
    .swiper-slide a{display: block; font-size: 16px; padding: 0 100px; height: 44px; line-height: 44px}
  }
}

.pageTitle{text-align: center; padding: 65px 0 35px 0;
  h2{font-weight: 100; font-size: 28px; padding-bottom: 24px; background: url("../image/pageTitle.png") center bottom no-repeat}
  p{font-weight: 100; line-height: 30px; font-size: 16px}
}
.pageMore a{display: block; width: 50px; height: 46px; line-height: 46px; @include radius(4px); background: $red url("../image/img50.png") right center no-repeat; padding-left: 0; font-size: 18px; color: rgba(0, 0, 0, 0);
  &:hover{width: 1rem; color: #fff; padding-left: 17px}
}

.indexPart1{background: url("../image/indexPart1.jpg") center top no-repeat; min-height: 718px;
  .container{height: 530px; @include shadow(0 9px 24px rgba(107, 107, 107, .33)); position: relative; padding-left: 374px; background: #fff}
  .video{@include absolute($l:0, $t:0); width: 374px;
    a{display: block; @include absolute($l:0, $t:0); width: 100%; height: 100%; background: url("../image/btn88.png") center no-repeat}
  }
  .tab{@include absolute($l:0, $b:0, $z:9); left: 0; bottom: 0; height: 75px; width: 100%; padding-left: 373px; border-top: #eaeaea solid 1px;
    li{float: left; width: 25%; height: 74px; font-size: 20px; padding: 20px 0 0 36px; position: relative; border-left: #eaeaea solid 1px; @extend .transition;
      &:before{@include before(); left: 36px; top: 51px; width: 22px; height: 2px; background: $red}
      &.on, &:hover{background: $red; border-color: $red; color: #fff;
        &:before{background: #fff; width: 60px}
      }
    }
  }
  .tabContent{min-height: 530px; background: url("../image/img468.png") left top no-repeat; padding: 0 90px 0 65px;
    .title{padding: 40px 0 30px 0;
      h2{font-weight: 400; font-size: 32px}
      p{text-transform: uppercase; font-size: 40px; color: #b48a69; font-weight: 200}
    }
    .content{font-size: 16px; line-height: 24px; color: #666; text-align: justify; height: 185px;
      h3{color: #333}
      p{text-indent: 2em}
    }
  }
}

.videoLayer{position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; @extend .transition;
  &.show{opacity: 1; visibility: visible}
  .container{width: 1240px; position: absolute; left: 50%; top: 50%; margin-left: -620px; margin-top: -390px}
  video{width: 100%}
  a.close{display: block; height: 120px; width: 120px; margin: 0 auto; background: url("../image/close45.png") center no-repeat;
    &:hover{background-image: url("../image/close45on.png")}
  }
}

.indexPart2{background: url("../image/indexPart2.jpg") center bottom no-repeat; min-height: 785px;
  .list{
    ul{margin-left: -65px}
    li{float: left; width: 33.333%; padding-left: 65px}
    .box{height: 530px; background: #fff center top no-repeat; @include shadow(0 9px 10px rgba(0, 0, 0, .15)); padding: 0 32px; position: relative; @extend .transition;
      .title{padding: 82px 0 30px 0;
        h2{font-weight: 400; position: relative; font-size: 32px; color: #000;
          &:before{@include before(); left: -32px; top: 50%; width: 22px; height: 2px; margin-top: -1px; background: $red}
        }
        p{font-size: 40px; color: #b48a69; text-transform: uppercase}
      }
      .content{font-size: 16px; line-height: 25px; text-align: justify; color: #666}
      .pageMore{@include absolute($l:32px, $b:30px)}
    }
    .box:hover{@include shadow(0 9px 20px rgba(67, 67, 67, .3))}
  }
}

.indexPart3{
  .fl{width: 577px; position: relative;
    a.layer{display: block; @include absolute($l:0, $b:0); width: 100%; min-height: 165px; background: rgba(0, 0, 0, .8); padding: 20px 24px; color: #ccc; font-size: 14px;
      h2{font-size: 22px; color: #f2d5ac; @extend .transition;
        &:hover{color: $red}
      }
      p{font-size: 16px; padding: 1em 0}
    }
  }
  .fr{height: 558px; width: 580px; position: relative;
    li a{border-bottom: #eaeaea solid 1px; min-height: 163px; padding: 18px 0 10px 0; display: block; position: relative; top: -20px;
      h2{font-size: 22px}
      p{font-size: 16px; line-height: 1.6em; color: #666; padding: 15px 0}
      .time{font-size: 14px; color: #999}
    }
    .pageMore{@include absolute($l:0, $b:0)}
  }
}

.indexPart4{background: url("../image/indexPart4.jpg") center bottom no-repeat; min-height: 650px; padding-bottom: 75px;
  .wal{position: relative}
  .list{margin-left: -19px; margin-right: -19px}
  #indexPart4{width: 100%; overflow: hidden; position: relative}
  .swiper-slide{padding: 0 10px;
    li{float: left; padding: 50px 9px; width: 20%;
      .box{position: relative; @include shadow(0 9px 24px rgba(107, 107, 107, .33))}
      .layer{@include absolute($l:0, $t:0); width: 100%; height: 100%; opacity: 0; @extend .transition; border: #e4b899 solid 4px; background: rgba(66, 45, 28, .95); text-align: center; color: #fff;
        h2{font-weight: 200; font-size: 28px; position: relative; padding: 80px 0 28px 0;
          &:before{@include before(); left: 50%; bottom: 12px; width: 30px; height: 2px; margin-left: -10px; background: $red}
        }
        p{font-size: 19px; line-height: 28px}
      }
      .box:hover .layer{opacity: 1}
    }
  }
  .dots{@include absolute($l:0, $b:10px); height: 12px;
    span{display: inline-block; height: 12px; width: 12px; margin-right: 12px; background: #dedede; @include radius(50%)}
    .swiper-pagination-bullet-active{background: $red}
  }
  .pageMore a{margin-left: auto}
}

.indexPart5{margin-left: -30px; margin-right: -30px;
  .list{width: 100%; overflow: hidden; position: relative;
    .swiper-slide{padding: 0 30px 35px 30px}
    ul{@extend .flexWrap; border-bottom: #ddd solid 1px; border-right: #ddd solid 1px}
    li{width: 25%; border-top: #ddd solid 1px; border-left: #ddd solid 1px; position: relative; z-index: 0;
      &:before{@include before(); left: -1px; top: -1px; width: 100%; height: 100%; border: #cebbab solid 1px; @include shadow(0 9px 24px rgba(78, 78, 78, .16)); opacity: 0}
      a{display: block; @include absolute($l:0, $t:0); width: 100%; height: 100%}
    }
    li:hover{z-index: 1;
      &:before{opacity: 1}
    }
  }
  .dots{text-align: center; font-size: 0; padding-bottom: 70px;
    span{display: inline-block; height: 12px; width: 12px; margin: 0 6px; background: #dedede; @include radius(50%)}
    .swiper-pagination-bullet-active{background: $red}
  }
}

/*page*/
.pageBanner{background: center no-repeat;
  .wal{height: 214px; position: relative}
  .title{text-align: center; padding: 65px 0 0 0; color: #fff; width: 510px; margin-left: auto;
    h2{font-weight: 100; font-size: 28px; padding-bottom: 24px; background: url("../image/img458.png") center bottom no-repeat}
    p{font-weight: 100; line-height: 30px; font-size: 16px}
  }
}
.pageNav{height: 185px; text-align: center; font-size: 0; padding-left: 137px;
  li{display: inline-block}
  a{display: block; height: 155px; padding: 35px 35px 0; font-size: 16px; text-align: center; color: #333; position: relative;
    &:before{@include before(); left: 0; top: 1.15rem; width: 100%; background: url("../image/img20.png") center no-repeat; background-size: .2rem; height: .13rem; opacity: 0}
    &:hover:before{opacity: 1}
    &.on:before{opacity: 1; background-image: url("../image/img20on.png")}
  }
}

.sideBar{width: 43px; position: fixed; z-index: 50; right: 0; top: 50%; margin-top: -107px; background: #645850;
  li{height: 43px; position: relative;
    a.name{display: block; height: 43px; line-height: 43px; text-align: center; color: #fff; position: relative; z-index: 11}
    .layer{@include absolute($t:0, $r:100%); min-height: 43px; text-align: center; background: $red; color: #fff; font-size: 14px; opacity: 0; visibility: hidden;
      p{line-height: 43px}
    }
  }
  li.li_01, .li_02{
    .layer{width: 134px; height: 167px; padding: 11px 11px 0}
  }
  li.li_02{
    a.name{font-size: 14px}
    .layer{top: -43px}
  }
  li.li_03 .layer{width: 104px}
  li.li_04 .layer{width: 134px}
  li.li_05 .layer{width: 80px}
  li:hover{
    a.name{background: $red}
    .layer{opacity: 1; visibility: visible; @extend .transition}
  }
}

.pageTitle2{@include absolute($l:0, $t:0);
  h2{float: left; font-size: 36px; color: $red; width: 45px; line-height: 1em}
}
.pageBox{min-height: 800px; position: relative; padding: 0 0 100px 137px}

.about{padding: 0 40px 0 580px; color: #000;
  .side{@include absolute($l:135px, $t:0);
    p{font-size: 14px; line-height: 48px}
  }
  h2.title{font-size: 30px; padding-bottom: 34px; font-weight: 400; position: relative; top: -6px}
  dl.info{height: 130px;
    dd{float: left; margin-right: 80px; text-align: center; font-size: 16px;
      div{font-size: 20px; height: 70px; line-height: 70px;
        b{font-size: 46px; color: $red; font-weight: 400}
      }
    }
  }
  .content{font-size: 18px; line-height: 30px; text-align: justify; padding-bottom: 40px;
    p{padding-bottom: 28px; text-indent: 2em}
  }
  .video{position: relative; z-index: 10;
    a{display: block; @include absolute($l:0, $t:0); width: 100%; height: 100%; background: url("../image/btn88.png") center no-repeat}
  }
  .img-1{position: relative; left: -294px; top: -67px; padding-bottom: 33px}
}

.culture{
  li{position: relative; min-height: 745px;
    &:before{@include before(); background: center no-repeat}
    .img{position: relative; padding-left: 182px}
    .title{position: relative}
  }
  li.li_01{
    &:before{top: 147px; right: 0; background-image: url("../image/img453.png"); width: 453px; height: 603px}
    .img{padding-left: 0}
    .title{top: -45px; width: 575px; margin-left: auto}
  }
  li.li_02{min-height: 825px;
    &:before{top: -83px; left: 0; background-image: url("../image/img470.png"); width: 470px; height: 505px}
  }
  li.li_03{min-height: 835px;
    &:before{top: 295px; left: 0; background-image: url("../image/img563.png"); width: 563px; height: 532px}
    .title{top: -42px; width: 762px; margin-left: auto}
  }
}

.shareholder{padding: 0 0 55px 137px;
  .container{background: url("../image/bgt.png") center top no-repeat; padding: 60px 180px 0 90px; min-height: 500px; position: relative}
  .logo{@include absolute($t:55px, $r:95px)}
  .list{
    li{padding-bottom: 50px; font-size: 20px; color: #666;
      div{color: #b60005; font-size: 20px;
        b{font-size: 48px}
      }
    }
  }
  .content{font-size: 18px; line-height: 30px; text-align: justify; padding-bottom: 50px}
  .list2{
    li{position: relative; padding: 0 0 40px 50px}
    .num{@include absolute($l:0, $t:0); width: 34px; height: 34px; line-height: 34px; text-align: center; background: #b60005; font-size: 18px; color: #fff; @include radius(50%)}
    h2{line-height: 34px; font-size: 20px; padding-bottom: 18px}
    p, dl{font-size: 18px; line-height: 30px}
    dl{@extend .flexWrap}
    dd{padding-right: 20px}
  }
}

.speech{padding: 0 170px 140px 190px;
  .name{padding: 15px 0 55px 0; font-size: 16px}
  .content{font-size: 18px; line-height: 40px; text-align: justify}
}

.issue{padding: 0 42px 100px 137px}

.icoLT{@include before(); width: 63px; height: 53px; background: url("../image/img63_1.png") center no-repeat}
.icoRB{@include before(); width: 63px; height: 53px; background: url("../image/img63_2.png") center no-repeat}
.ywyfwMsg{text-indent: 2em; font-size: 18px; line-height: 32px; text-align: justify; padding: 50px 10px 50px 0; position: relative}
.assets{padding: 0 210px 180px 250px;
  .msg{@extend .ywyfwMsg; padding: 50px 10px 50px 0;
    &:before{@extend .icoLT; left: -30px; top: 0}
    &:after{@extend .icoRB; right: -40px; bottom: 30px}
  }
}

.wealth{padding: 0 117px 100px 210px;
  .msg{@extend .ywyfwMsg; padding: 110px 60px 90px 40px;
    &:before{@extend .icoLT; left: 0; top: 50px}
    &:after{@extend .icoRB; right: 0; bottom: 55px}
  }
}

.service{padding: 0 117px 100px 210px;
  .msg{@extend .ywyfwMsg; padding: 50px 60px 90px 40px;
    &:before{@extend .icoLT; left: 0; top: 0}
    &:after{@extend .icoRB; right: 0; bottom: 55px}
  }
  .container{padding: 40px 60px 40px 45px;
    h2{color: $red; font-size: 20px; padding-bottom: 15px}
    p{text-indent: 2em; font-size: 18px; line-height: 30px; text-align: justify}
  }
}

.pageMore2{clear: both; padding-top: 20px; color: #999; text-align: center; font-size: 16px;
  a{display: block; color: #999; background: #f7f7f7; line-height: 56px; border: #ebebeb solid 1px; @include shadow(0 2px 8px rgba(0, 0, 0, .05))}
  a:hover{background: $red; color: #fff; border-color: $red}
  .loading{font-size: 14px; display: none;
    i{display: inline-block; margin: 0 2px; width: 6px; height: 6px; background: #c5c5c5; @include radius(50%); @extend .transition}
    i.on{background: $red}
  }
  .msg{line-height: 56px; display: none}
}

.news{margin-left: -28px;
  li{float: left; width: 33.333%; padding: 0 0 28px 28px}
  a{display: block; height: 385px; border: #ebebeb solid 1px; border-top: 0; @include shadow(0 2px 8px rgba(0, 0, 0, .05)); padding: 0 16px; font-size: 14px;
    .img{margin-left: -17px; margin-right: -17px;
      img{width: 100%}
    }
    .name{height: 75px; padding: 13px 0; font-size: 18px; line-height: 1.5em; color: #000}
    p{line-height: 18px; text-align: justify; color: #666; height: 82px; overflow: hidden}
    .time{color: #999}
  }
  a:hover{@include shadow(0 15px 24px rgba(0, 0, 0, .14))}
}

.honor{
  ul{margin-left: -37px}
  li{float: left; padding: 0 0 40px 37px; width: 25%;
    .box{position: relative; @include shadow(0 9px 24px rgba(107, 107, 107, .33))}
    img{width: 100%}
    .layer{@include absolute($l:0, $t:0); width: 100%; height: 100%; opacity: 0; @extend .transition; border: #e4b899 solid 4px; background: rgba(66, 45, 28, .95); text-align: center; color: #fff;
      h2{font-weight: 200; font-size: 30px; position: relative; padding: 85px 0 30px 0;
        &:before{@include before(); left: 50%; bottom: 12px; width: 30px; height: 2px; margin-left: -10px; background: $red}
      }
      p{font-size: 20px; line-height: 30px}
    }
    .box:hover .layer{opacity: 1}
  }
}

.notice{margin-left: -28px;
  li{float: left; width: 33.333%; padding: 0 0 28px 28px}
  a{display: block; height: 192px; border: #ebebeb solid 1px; @include shadow(0 2px 8px rgba(0, 0, 0, .05)); padding: 0 16px; font-size: 14px;
    .name{height: 75px; padding: 13px 0; font-size: 18px; line-height: 1.5em; color: #000}
    p{line-height: 18px; text-align: justify; color: #666; height: 82px; overflow: hidden}
    .time{color: #999}
  }
  a:hover{@include shadow(0 15px 24px rgba(0, 0, 0, .14))}
}

.newShow{margin-top: 30px; margin-bottom: 80px; border: #eaeaea solid 1px;
  .box{padding: 45px 82px; border-bottom: #eaeaea solid 1px; border-top: #eaeaea solid 1px;
    h2.title{font-size: 28px}
    .time{font-size: 16px; color: #666; padding: 12px 0 50px 0}
    .content{font-size: 18px; line-height: 30px; text-align: justify;
      p{text-indent: 2em; padding-bottom: 30px}
      .img{text-align: center; padding-bottom: 30px}
    }
  }
  div.btn{height: 110px; position: relative; font-size: 14px;
    p{line-height: 110px; padding-left: 212px; color: #999;
      a{color: #999}
    }
    a.btn{display: block; position: absolute; top: 50%; right: 82px; min-width: 90px; height: 38px; line-height: 36px; text-align: center; @include radius(4px); border: #ccc solid 1px; padding: 0 13px; margin-top: -19px; color: #000;
      &:hover{background: #f2f2f2}
      &.prev{right: 235px}
      &.back{right: auto; left: 82px}
    }
  }
}

.principle{padding: 0 54px; border: #eaeaea solid 1px;
  li{min-height: 148px; border-bottom: #eaeaea solid 1px; position: relative; padding: 45px 0 45px 270px;
    &:last-child{border: 0}
    .name{font-size: 24px; color: #fff; background: $red url("../image/img50.png") right center no-repeat; @include absolute($l:0, $t:52px); height: 46px; line-height: 46px; @include radius(4px); padding: 0 48px 0 16px}
    p{font-size: 18px; line-height: 30px; color: #666}
  }
}

.screening{text-align: center}

.system{width: 765px; margin: 0 auto;
  .img{text-align: center}
  .msg{text-indent: 2em; font-size: 18px; line-height: 30px; color: #666; padding: 80px 0 50px 0}
}

.branch{
  h2.title{font-size: 24px}
  .msg{font-size: 16px; padding: 15px 0 20px 0; line-height: 1.7em}
  .list{
    .name{clear: both; font-size: 16px; color: #666; padding-bottom: 15px}
    ul{margin-left: -28px}
    li{float: left; width: 33.333%; padding: 0 0 28px 28px;
      .box{height: 200px; position: relative; border: #ebebeb solid 1px; padding: 18px 21px; @include shadow(0 2px 8px rgba(0, 0, 0, .05))}
      h3{font-size: 18px; padding-bottom: 8px}
      p{font-size: 14px; padding-bottom: 15px; line-height: 1.5em}
      a.btn{display: block; @include absolute($l:21px, $b:20px); border: $red solid 1px; color: $red; @include radius(3px); width: 96px; height: 30px; line-height: 28px; text-align: center;
        &:hover{background: $red; color: #fff}
      }
    }
  }
}

.job{
  .form{width: 820px; margin: 0 auto; position: relative; height: 110px; padding-right: 112px;
    .input{border: #999 solid 1px; height: 58px; @include shadow(0 2px 8px rgba(0, 0, 0, .05));
      input{width: 100%; font-size: 20px; color: #999; height: 56px; line-height: 56px; padding: 0 20px}
    }
    .submit{@include absolute($t:0, $r:0); width: 96px; height: 58px; background: #999; @include radius(4px); @include shadow(0 2px 10px rgba(0, 0, 0, .32));
      input{width: 100%; height: 58px; font-size: 20px; color: #fff; cursor: pointer}
    }
    &.on{
      .input, .submit{@include shadow(0 2px 10px rgba(216, 2, 5, .32))}
      .input{border-color: $red;
        input{color: $red}
      }
      .submit{background: $red}
    }
  }
  .title{font-size: 16px; color: #666; padding-bottom: 12px}
  .list{
    li{border: #ebebeb solid 1px; min-height: 86px; margin-bottom: 15px; @include shadow(0 2px 8px rgba(0, 0, 0, .05)); padding: 16px 30px; position: relative;
      h2{font-size: 20px; font-weight: 400}
      .msg{font-size: 16px; padding-top: 6px}
      a.btn{display: block; @include absolute($t:26px, $r:30px); border: $red solid 1px; @include radius(3px); color: $red; width: 98px; height: 32px; line-height: 30px; font-size: 14px; padding-left: 14px; background: url("../image/img20_1.png") right center no-repeat;
        &:hover{background-color: $red; color: #fff; background-image: url("../image/img20_1on.png")}
      }
      .container{display: none; padding: 20px 0 30px 0; font-size: 14px; line-height: 1.7em;
        .name{padding: 14px 0}
      }
    }
    li.on{
      a.btn{color: #666; border-color: #666; background-image: url("../image/img20_2.png");
        &:hover{color: #fff; border-color: $red; background-image: url("../image/img20_2on.png")}
      }
      .container{display: block}
    }
  }
}



















